<template>
    <view class="pg-center">
        <z-paging ref="paging" v-model="publishList" @query="queryList" auto-show-back-to-top back-to-top-threshold="400rpx" back-to-top-with-animate auto-show-system-loading>
            <template #top>
                <view class="w-750 fl-ro-cen bg-white pl-25">
                    <wd-button size="small" icon="add" @click="add">发布</wd-button>
                    <view class="w-700">
                        <wd-search disabled v-model="searchValue" @search="search_start" @clear="search_clear" @change="search_change" focusWhenClear hide-cancel />
                    </view>
                </view>
            </template>
            <view class="w-750">
                <wd-cell-group>
                    <template v-for="(item, index) in publishList" :key="item.id">
                        <wd-cell size="large" border clickable @click="ad_onclick(item, index)">
                            <template #title>
                                <view class="fl-ro-cen gap-10">
                                    <wd-text :text="item.material.name" color="#333" size="30rpx"></wd-text>
                                    <wd-img :src="item.type == 1 ? '../../../../static/image/安卓.svg' : '../../../../static/image/微信小程序.svg'" width="28rpx" height="28rpx" />
                                    <wd-img
                                        :src="item.material.type == 1 ? '../../../../static/image/图片.svg' : '../../../../static/image/视频.svg'"
                                        width="28rpx"
                                        height="28rpx"
                                    />
                                </view>
                            </template>
                            <template #label>
                                <wd-text
                                    :type="item.state === 0 ? 'error' : item.state === 1 ? 'warning' : 'success'"
                                    :text="item.state === 0 ? '未通过' : item.state === 1 ? '审核中' : '已通过'"
                                    size="26rpx"
                                ></wd-text>
                            </template>
                            <template>
                                <wd-text :text="item.createTime" color="#c3c3c3" size="26rpx"></wd-text>
                            </template>
                        </wd-cell>
                    </template>
                </wd-cell-group>
            </view>
        </z-paging>
    </view>

    <wd-popup v-model="popupShow" position="bottom" :safe-area-inset-bottom="true" custom-class="fl-co-cen ju-cen">
        <text class="w-750 fs-34 text-center p-20 bts-1" @click="preview">查看</text>
        <text class="w-750 fs-34 text-center p-20 bts-1" @click="del">删除</text>
        <text class="w-750 fs-34 text-center p-20 bts-10" @click="cancel">取消</text>
    </wd-popup>
</template>

<script setup>
    import { ref, nextTick } from 'vue';
    import { api_advertiseApply_dtoList, api_advertiseApply_deleteByIds } from '@/api/advertiseApply.js';
    import { onShow } from '@dcloudio/uni-app';

    const publishList = ref([]);
    const searchValue = ref('');
    const popupShow = ref(false); //点击列表底部弹窗
    const selectedPublish = ref({}); //选择删除的对象
    const paging = ref(null);

    //加载数据
    const queryList = async (pageNo, pageSize) => {
        let queryMap = {
            eq: {},
            in: {},
            like: {},
            ge: {},
            le: {},
            order: {
                create_time: 'desc'
            }
        };
        if (searchValue.value != '') {
            queryMap.like.name = searchValue.value;
        }
        // 访问查询设备场地接口
        try {
            let res = await api_advertiseApply_dtoList({
                pageCut: true,
                pageNum: pageNo,
                pageSize: pageSize,
                queryMap: queryMap
            });
            paging.value.complete(res.data);
        } catch (error) {
            paging.value.complete(false);
            // uni.showToast({
            //     title: error.msg,
            //     icon: 'none'
            // });
        }
    };

    //点击发布
    const add = () => {
        console.log('点击发布');
        uni.navigateTo({
            url: '/pages/merchant/ad-manage/ad-publish/new-publish/new-publish'
        });
    };

    //搜索
    const search_start = () => {
        paging.value.reload();
    };

    //清空搜索
    const search_clear = () => {
        paging.value.reload();
    };

    //搜索失焦
    const search_change = () => {
        if (searchValue.value == '') {
            paging.value.reload();
        }
    };

    //点击广告列表
    const ad_onclick = (item, index) => {
        console.log('点击了', index);
        selectedPublish.value = item;
        popupShow.value = true;
    };

    //点击查看
    const preview = () => {
        console.log('点击查看');
        uni.navigateTo({
            url: `/pages/merchant/ad-manage/ad-publish/publish-preview/publish-preview?id=${selectedPublish.value.id}`
        });
        popupShow.value = false;
    };

    //点击删除
    const del = () => {
        console.log('点击删除', selectedPublish.value);
        uni.showModal({
            title: '确认删除',
            success: async (res) => {
                if (res.confirm) {
                    try {
                        await api_advertiseApply_deleteByIds([].concat(selectedPublish.value.id));
                        paging.value.refresh();
                    } catch (error) {
                        uni.showToast({
                            title: error.msg,
                            icon: 'none'
                        });
                    }
                    popupShow.value = false; //关闭弹窗
                }
            }
        });
    };

    //点击取消 关闭弹窗
    const cancel = () => {
        popupShow.value = false;
    };

    onShow(() => {
        nextTick(() => {
            paging.value.reload();
        });
    });
</script>

<style lang="scss" scoped>
    .txt {
        border-bottom: 1rpx solid #f8f8f8;
    }
</style>
